<script lang="ts" setup>
import type { InventoryApi } from '#/api/spa/inventory';
import type { Rule } from 'ant-design-vue/es/form';

import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from '#/components/upload';
import {
  message,
  Tabs,
  Form,
  Input,
  Textarea,
  Select,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  DatePicker,
  TreeSelect,
} from 'ant-design-vue';

import { computed, ref } from 'vue';
import { $t } from '#/locales';
import {
  getInventory,
  createInventory,
  updateInventory,
} from '#/api/spa/inventory';

const emit = defineEmits(['success']);

const formRef = ref();
const formData = ref<Partial<InventoryApi.Inventory>>({
  id: undefined,
  productCode: undefined,
  productName: undefined,
  category: undefined,
  subCategory: undefined,
  unit: undefined,
  currentStock: undefined,
  minStock: undefined,
  maxStock: undefined,
  unitPrice: undefined,
  costPrice: undefined,
  supplier: undefined,
  supplierContact: undefined,
  expiryDate: undefined,
  status: undefined,
});
const rules: Record<string, Rule[]> = {
  productCode: [
    { required: true, message: '商品编码不能为空', trigger: 'blur' },
  ],
  productName: [
    { required: true, message: '商品名称不能为空', trigger: 'blur' },
  ],
  category: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
  unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
  currentStock: [
    { required: true, message: '当前库存不能为空', trigger: 'blur' },
  ],
  minStock: [{ required: true, message: '最低库存不能为空', trigger: 'blur' }],
  maxStock: [{ required: true, message: '最高库存不能为空', trigger: 'blur' }],
  unitPrice: [{ required: true, message: '单价不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '商品状态不能为空', trigger: 'blur' }],
};
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['库存管理'])
    : $t('ui.actionTitle.create', ['库存管理']);
});

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    productCode: undefined,
    productName: undefined,
    category: undefined,
    subCategory: undefined,
    unit: undefined,
    currentStock: undefined,
    minStock: undefined,
    maxStock: undefined,
    unitPrice: undefined,
    costPrice: undefined,
    supplier: undefined,
    supplierContact: undefined,
    expiryDate: undefined,
    status: undefined,
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    // 提交表单
    const data = formData.value as InventoryApi.Inventory;
    try {
      await (formData.value?.id
        ? updateInventory(data)
        : createInventory(data));
      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success({
        content: $t('ui.actionMessage.operationSuccess'),
        key: 'action_process_msg',
      });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    // 加载数据
    let data = modalApi.getData<InventoryApi.Inventory>();
    if (!data) {
      return;
    }
    if (data.id) {
      modalApi.lock();
      try {
        data = await getInventory(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item label="商品编码" name="productCode">
        <Input
          v-model:value="formData.productCode"
          placeholder="请输入商品编码"
        />
      </Form.Item>
      <Form.Item label="商品名称" name="productName">
        <Input
          v-model:value="formData.productName"
          placeholder="请输入商品名称"
        />
      </Form.Item>
      <Form.Item label="商品分类" name="category">
        <Input v-model:value="formData.category" placeholder="请输入商品分类" />
      </Form.Item>
      <Form.Item label="子分类" name="subCategory">
        <Input
          v-model:value="formData.subCategory"
          placeholder="请输入子分类"
        />
      </Form.Item>
      <Form.Item label="单位" name="unit">
        <Input v-model:value="formData.unit" placeholder="请输入单位" />
      </Form.Item>
      <Form.Item label="当前库存" name="currentStock">
        <Input
          v-model:value="formData.currentStock"
          placeholder="请输入当前库存"
        />
      </Form.Item>
      <Form.Item label="最低库存" name="minStock">
        <Input v-model:value="formData.minStock" placeholder="请输入最低库存" />
      </Form.Item>
      <Form.Item label="最高库存" name="maxStock">
        <Input v-model:value="formData.maxStock" placeholder="请输入最高库存" />
      </Form.Item>
      <Form.Item label="单价" name="unitPrice">
        <Input v-model:value="formData.unitPrice" placeholder="请输入单价" />
      </Form.Item>
      <Form.Item label="成本价" name="costPrice">
        <Input v-model:value="formData.costPrice" placeholder="请输入成本价" />
      </Form.Item>
      <Form.Item label="供应商" name="supplier">
        <Input v-model:value="formData.supplier" placeholder="请输入供应商" />
      </Form.Item>
      <Form.Item label="供应商联系方式" name="supplierContact">
        <Input
          v-model:value="formData.supplierContact"
          placeholder="请输入供应商联系方式"
        />
      </Form.Item>
      <Form.Item label="过期日期" name="expiryDate">
        <DatePicker
          v-model:value="formData.expiryDate"
          valueFormat="x"
          placeholder="选择过期日期"
        />
      </Form.Item>
      <Form.Item label="商品状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio value="1">请选择字典生成</Radio>
        </RadioGroup>
      </Form.Item>
    </Form>
  </Modal>
</template>
